<template>
	<div class="categoryContainer">
		<view class="header">
			<view class="search">
				搜索商品
			</view>
		</view>
		<view class="content">
			<view class="leftContainer">
				<scroll-view class="navScroll" scroll-y="true" >
					<view class="navItem" :class="{active:currentId ===category.id}" @click="changeNavId(category.id)" v-for="category in categoryDatas" :key="category.id">{{category.name}}</view>
				</scroll-view>
			</view>
			<view class="rightContianer">
				<scroll-view scroll-y="true" class="contentScroll" >
					<view>
						<view class="scrollHeader">
							<image class="headImg" :src="cateList.imgUrl" mode=""></image>
						</view>
						<view class="contentItem" v-for="item in cateList.subCateList" :key="item.id">
							<image class="contentItemImg" :src="item.wapBannerUrl" mode=""></image>
							<text class="contentItemText">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</div>

</template>

<script>
	import request from '../../utils/request.js'
	export default{
		data(){
			return{
				categoryDatas:[],
				currentId: null
			}
		},
		async mounted() {
			let result = await request('/getCategoryDatas')
			console.log(result);
			this.categoryDatas = result.name
			this.currentId = this.categoryDatas[0].id
		},
		methods:{
			changeNavId(id){
				this.currentId = id
				console.log(this.cateList);
			}
		},
		computed:{
			cateList(){
				//find filter evey some
				//find 返回元素 filter 返回数组
				return this.categoryDatas.find((item,index)=>{
					return item.id === this.currentId
				})
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		.header
			padding 10upx 20upx
			border-bottom 2upx solid #eee
			.search
				width 100%
				height 60upx
				line-height 60upx 
				text-align center
				border-radius 10upx
				background-color #eee
				font-size 28upx
		.content
			height calc(100vh - 82upx)
			.leftContainer
				width 20%
				border-right 1upx solid #eee
				box-sizing border-box
				float left
				height 100%
				.navScroll
					height 100%
					.navItem
						position relative
						width 148upx
						height 80upx
						line-height 80upx
						text-align center
						font-size 26upx
						&.active
							&::after
								content ""
								width 2upx
								height 69upx
								position absolute
								top 10upx
								left 4upx
								background-color red
			.rightContianer
				width 80%
				height 100%
				background-color white
				float left
				.contentScroll
					width 100%
					height 100%
					.scrollHeader
						width 100%
						.headImg
							display block
							width 520upx
							height 190upx
							margin 20upx auto
					.contentItem
						display inline-block
						flex-direction column
						align-items center
						width 33.333%
						.contentItemImg
							width 100%
							height 144upx
						.contentItemText
							display block
							font-size 26upx
							text-align center
</style>
